import React, { Component, useState, useEffect, useRef } from 'react';
import {
  Form,
  Input,
  Table,
  Button,
  Tag,
  Modal,
  Radio,
  Row,
  Divider,
  Col,
  Alert,
  DatePicker,
  Upload,
  Popconfirm,
  message,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';
import Add from './add';
import Edit from './edit';
import { connect } from 'dva';
import styles from './styles.less';
// const { MonthPicker, RangePicker } = DatePicker;

// @connect(({ commodity }) => ({
//   datasource: commodity.view,
// }))
// class Commodity extends Component {
const Index = ({
  dispatch,
  datasource,
  total,
  isRefresh,
}: {
  dispatch: (type: any) => void;
  datasource: Array<any>;
  total: number;
  isRefresh: boolean;
}) => {
  const [comments, setcomments] = useState('');
  const [add, setAdd] = useState(false);
  const [edit, setEdit] = useState(false);
  const [size, setSize] = useState(10);
  const [currentPage, setcurrentPage] = useState(1);
  let formRef: any = useRef(null);
  let editRef: any = useRef(null);

  useEffect(() => {
    // handleSearch();
    dispatch({
      type: 'commodity/reFresh',
      payload: true,
    });
  }, [size, currentPage, comments]);

  useEffect(() => {
    if (isRefresh) {
      handleSearch();
    }
  }, [isRefresh]);

  const handleSearch = () => {
    dispatch({
      type: 'commodity/list',
      payload: {
        comments,
        size: size,
        page: currentPage,
      },
    });
  };

  const handleaddOk = () => {
    setAdd(true);
  };
  const handleaddCancel = () => {
    setAdd(false);
  };
  const handleUpload = () => {};
  const handleDown = () => {
    dispatch({
      type: 'commodity/down',
    });
  };

  const handleaddSubmit = () => {
    formRef.handleSubmit();
  };
  const columns = [
    {
      title: '序号',
      align: 'center',
      render: (text: any, record: any, index: any) => `${index + 1}`,
    },
    {
      title: '酒类名',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '包装类型',
      dataIndex: 'wineType',
      align: 'center',
    },
    {
      title: '单位',
      dataIndex: 'wineUnits',
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'comments',
      align: 'center',
    },

    {
      title: '操作',
      dataIndex: 'operate',
      align: 'center',
      render: (text: any, record: any, index: any) => {
        const id = record.id;
        return (
          <span>
            <a
              onClick={() => {
                setEdit(true);
                dispatch({
                  type: 'commodity/view',
                  payload: record,
                });
              }}
            >
              修改
            </a>
            <Divider type="vertical" />
            <Popconfirm
              title="你确定要删除该条信息嘛？"
              onConfirm={() => {
                dispatch({
                  type: 'commodity/delete',
                  payload: { ids: id },
                });
              }}
              onCancel={() => {}}
              okText="Yes"
              cancelText="No"
            >
              <a href="#">删除</a>
            </Popconfirm>
          </span>
        );
      },
    },
  ];

  return (
    <PageHeaderWrapper>
      <div className={styles.Commodity} style={{ paddingLeft: '22px', marginBottom: '6px' }}>
        <Form layout="inline">
          <Form.Item label="商品名">
            <Input
              onChange={(e: any) => {
                console.log(e, 9999);
                setcomments(e.target.value);
                setcurrentPage(1);
              }}
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              onClick={() => {
                dispatch({
                  type: 'commodity/reFresh',
                  payload: true,
                });
              }}
              style={{ marginRight: '14px' }}
            >
              搜索
            </Button>
            <Button type="primary" onClick={handleaddOk} style={{ marginRight: '64px' }}>
              新增
            </Button>
            <Button
              type="dashed"
              icon="download"
              style={{ marginRight: '14px' }}
              onClick={handleDown}
            >
              模版下载
            </Button>
            <Upload
              name="file"
              accept="*"
              customRequest={(info: any) => {
                const file = info.file;
                let form = new FormData();
                form.append('file', file);
                dispatch({
                  type: 'commodity/upload',
                  payload: form,
                });
              }}
            >
              <Button type="dashed" icon="upload">
                批量上传
              </Button>
            </Upload>
            ,
          </Form.Item>
        </Form>
      </div>

      <div style={{ background: '#fff' }}>
        <Table
          bordered
          columns={columns}
          dataSource={datasource}
          loading={isRefresh}
          size="middle"
          pagination={{
            pageSizeOptions: ['10', '20', '30', '40'],
            showSizeChanger: true,
            total: total,
            pageSize: size,
            current: currentPage,
            onChange: (page: any, pageSize: any) => {
              setcurrentPage(page);
            },
            onShowSizeChange: (current: any, size: any) => {
              setSize(size);
            },
          }}
        />
      </div>

      <Modal
        title="新增"
        visible={add}
        destroyOnClose={true}
        onOk={handleaddSubmit}
        onCancel={handleaddCancel}
      >
        <Add
          close={handleaddCancel}
          submit={(view: any, data: any) => {
            dispatch({
              type: 'commodity/add',
              payload: data,
            });
          }}
          wrappedComponentRef={(form: any) => (formRef = form)} //5、使用wrappedComponentRef 拿到子组件传递过来的ref（官方写法）
        />
      </Modal>
      <Modal
        title="修改"
        visible={edit}
        destroyOnClose={true}
        onOk={() => {
          editRef.handleSubmit();
        }}
        onCancel={() => {
          setEdit(false);
        }}
      >
        <Edit
          close={() => {
            setEdit(false);
          }}
          submit={(view: any, data: any) => {
            dispatch({
              type: 'commodity/put',
              payload: { ...view, ...data },
            });
          }}
          wrappedComponentRef={(form: any) => (editRef = form)} //5、使用wrappedComponentRef 拿到子组件传递过来的ref（官方写法）
        />
      </Modal>
    </PageHeaderWrapper>
  );
};

export default connect(({ commodity }: any) => ({
  datasource: commodity.list,
  total: commodity.total,
  isRefresh: commodity.isRefresh,
}))(Index);
